<template>
    <div class="middle-box text-center loginscreen  animated fadeInDown">
        <div>
            <div>
                <h1 class="logo-name"></h1>
                <img src="../assets/food.png">
            </div>
            <h3>注册新账号</h3>
            <el-form :model="loginForm" ref="loginForm" :rules="rules" class="m-t">
                <el-form-item label="" prop="username">
                    <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item label="" prop="checkPass">
                    <el-input v-model="loginForm.checkPass" type="password" placeholder="确认密码"></el-input>
                </el-form-item>
                <button type="button" class="btn btn-primary block full-width m-b" @click="submitForm">注 册</button>
                <p class="text-muted text-right">
                    <small>已有账号，</small>
                    <a href="javaScript:void(0)" @click="linkTo('login')">请登录</a>
                </p>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Register',
        data() {
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.loginForm.checkPass !== '') {
                        this.$refs.loginForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            const validateCheckPass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.loginForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                loginForm: {
                    username: '',
                    password: '',
                    checkPass: ''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validateCheckPass, trigger: 'blur'}
                    ],
                }
            }
        },
        beforeRouteEnter(to, from, next) {
            let toName = to.name;
            if (toName === 'register') {
                document.querySelector("body").classList.add("loginBody");
            }

            next()
        },
        beforeRouteLeave(to, from, next) {
            let toName = to.name;
            if (toName !== 'login' && toName !== 'reset') {
                document.querySelector("body").classList.remove("loginBody");
            }
            next()
        },
        mounted: function () {
        },
        methods: {
            submitForm() {
                this.$refs['loginForm'].validate((valid) => {
                    if (valid) {
                        this.registerUser();
                        // this.$router.push({path: '/'});
                        // location.reload();
                    } else {
                        return false;
                    }
                });
            },
            linkTo(toPath) {
                this.$router.push(toPath);
            },
            async registerUser() {
                let res = await this.$api.post('/sys/user/save', this.loginForm);
                if (res.code === 0) {
                    this.$message.success('保存成功');
                } else {
                    this.$message.error(res.msg);
                }
            }
        }
    }
</script>

<style type="text/css">
    body.loginBody {
        height: auto;
        background: url('~@/assets/img/login-background.jpg') no-repeat center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        /*color: rgba(255, 255, 255, .95)*/
    }
</style>
